<template>
    <h1>{{ firstName }}</h1>
    <h1>{{ lastName }}</h1>
    <h1>{{ fullName }}</h1>
    <button @click="changeFullName">修改名称</button>
</template>


<script lang="ts" setup name="ComputedInfo">
import { ref, computed } from 'vue'
let firstName = ref("张")
let lastName = ref("三")

// 第一种只读不修改
// let fullName = computed(() => {
//     return firstName.value + "-" + lastName.value
// })

// 第二种可以进行修改
let fullName = computed({
    // 获取方法
    get() {
        return firstName.value + "-" + lastName.value
    },
    // 修改方法 
    set(val) {
        console.log("有人修改了数据", val);
        firstName.value = val.split("-")[0]
        lastName.value = val.split("-")[1]
    }
})

function changeFullName() {
    fullName.value = "李-四"
}


</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>